import React, { useState, useEffect } from 'react';
import ReactMarkdown from 'react-markdown';
import MarkNav from 'markdown-navbar';
import rehypeRaw from 'rehype-raw';
import gfm from 'remark-gfm';
import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';
import 'github-markdown-css';
import 'katex/dist/katex.min.css'; // 引入 Katex 的样式
import './index.less';
import { FloatButton } from 'antd';

const Rules = () => {
    const mdUrl = `/markdowm/newRules.md`;
    const [mdContent, setMdContent] = useState('');

    useEffect(() => {
        fetch(mdUrl)
            .then(res => res.text())
            .then(text => setMdContent(text));
    }, []);

    return (
        <div className='markdown-container'>
            <ReactMarkdown
                className="markdown-body"
                rehypePlugins={[rehypeRaw, rehypeKatex]}
                remarkPlugins={[gfm, remarkMath]}
                children={mdContent}
            />
            <div className="markdown-nav">
                <h2>目录</h2>
                <MarkNav className="markdown-nav-item" source={mdContent} />
            </div>
            <FloatButton.BackTop onClick={() => console.log('onClick')} />
        </div>
    );
};

export default Rules;